<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程训练</title>
</head>

<body>
    <main>
        <div class="videoDetails">
            <video id="video" muted></video>
            <div class="videoText">
                <h2><span id="vIndex">1</span>/<span id="vLength">4</span></h2>
                <p id="vTitle">膝关节环绕</p>

            </div>
            <div id="backprev">
                <span class="iconfont iconleftarrow"></span>
            </div>
        </div>
        <div class="videoPlayer">
            <div id="proBar"></div>
            <div class="playerKey">
                <span class="iconfont iconxueyuan-shangyijie" id="forward"></span>
                <span class="iconfont  icon-24gf-pause2" id="playpause"></span>
                <span class="iconfont iconxueyuan-xiayijie" id="backwards"></span>
            </div>
        </div>
    </main>
    <div class="pauseMask">
        <p>放弃可以找到一万个理由，坚持只需要一个信念</p>
        <ul>
            <li>
                <button class="goon">
                    <em class="iconfont iconicon_play"></em><br>
                    <span>继续训练</span>
                </button>
                <button class="over">
                    <em class="iconfont iconjieshu"></em><br>
                    <span>结束训练</span>
                </button>
            </li>
            <li>
                <img src="#" id="img">
                <div class="current">
                    当前：<br>
                    <span id="mTitle">男子平板支撑</span>
                </div>
            </li>
        </ul>
    </div>


</body>

</html>